<script lang="ts" setup>
import { MessagePlugin } from "tdesign-vue-next"
import { LockOnIcon, SecuredIcon, UserIcon } from "tdesign-icons-vue-next"
import { reactive, ref } from "vue"
import { apiUrl, post } from "@/utils/api"
import { goPath } from "@/utils/goPath"

const formData = reactive({
  account: "",
  password: "",
  captcha: "",
  rememberAccount: true
})

const loginLoading = ref(false)

const rules = {
  account: [{ required: true, type: "error", trigger: "blur" }],
  password: [{ required: true, type: "error", trigger: "blur" }],
  captcha: [{ required: true, type: "error", trigger: "blur" }]
}

const codeUrl = ref(apiUrl("/api/admin/generateCaptcha"))
const codeUrlChange = () => {
  codeUrl.value = apiUrl("/api/admin/generateCaptcha?time=" + Date.now())
}

const loginSubmit = ({ validateResult, firstError }: any) => {
  if (validateResult === true) {
    login()
  } else {
    console.log("Validate Errors: ", firstError, validateResult)
  }
}

const login = async () => {
  loginLoading.value = true
  const response = await post("/api/admin/login", formData)
  MessagePlugin(response.status, response.message)
  if (response.status === "success") {
    const token = JSON.stringify({
      rememberAccount: formData.rememberAccount,
      time: new Date().getTime()
    })
    localStorage.setItem("isLogin", token)
    goPath("/admin")
  } else {
    codeUrlChange()
  }
  loginLoading.value = false
}
</script>

<template>
  <t-row>
    <t-form ref="form" :data="formData" :rules="rules" class="form" label-align="top" @submit="loginSubmit">

      <t-form-item label="账号"
                   name="account">
        <t-input v-model="formData.account" clearable placeholder="请输入账号或邮箱">
          <template #prefix-icon>
            <UserIcon />
          </template>
        </t-input>
      </t-form-item>

      <t-form-item label="密码"
                   name="password">
        <t-input v-model="formData.password" clearable placeholder="请输入密码" type="password">
          <template #prefix-icon>
            <lock-on-icon />
          </template>
        </t-input>
      </t-form-item>

      <t-form-item label="验证码" name="captcha">
        <t-row class="code_container">
          <t-input v-model="formData.captcha" class="code_input" placeholder="请输入验证码">
            <template #prefix-icon>
              <SecuredIcon />
            </template>
          </t-input>
          <img :src=codeUrl alt="" @click="codeUrlChange()" class="code" />
        </t-row>
      </t-form-item>

      <t-form-item>
        <t-row class="code_container">
        <t-checkbox v-model="formData.rememberAccount" label="记住账号" />
          <t-link href="/login/admin/forget" target="_self" hover="color" content="忘记密码" />
        </t-row>
      </t-form-item>

      <t-form-item>
        <t-button :loading="loginLoading" block theme="primary" type="submit">登录</t-button>
      </t-form-item>

    </t-form>
  </t-row>

</template>

<style lang="less" scoped>
.form {
  width: 100%;

  .code_container {
    width: 100%;
    display: flex;
    justify-content: space-between;

    .code_input {
      width: 170px;
    }

    .code {
      cursor: pointer;
    }
  }

}
</style>
